<template>
  <div class="cs-page-container">
    <div class="cs-filter-container">
      <el-input
        v-model="listQuery.familyId"
        clearable
        placeholder="家族ID"
        style="width:130px"
      />
      <el-input
        v-model="listQuery.applyUserId"
        clearable
        placeholder="族长ID"
        style="width:130px"
      />
      <el-select
        v-model="listQuery.type"
        clearable
        filterable
        placeholder="审核状态"
        style="width:100px"
      >
        <el-option label="未审核" :value="0" />
        <el-option label="通过" :value="1" />
        <el-option label="不通过" :value="2" />
      </el-select>
      <el-select
        v-model="listQuery.checkType"
        clearable
        filterable
        placeholder="修改项"
        style="width:100px"
      >
        <el-option label="家族ID" :value="0" />
        <el-option label="家族名称" :value="1" />
        <el-option label="家族简介" :value="2" />
        <el-option label="家族封面" :value="3" />
      </el-select>
      <el-date-picker
        v-model="daterangeValue"
        :picker-options="daterangePickerOptions"
        type="daterange"
        align="right"
        unlink-panels
        range-separator="至"
        start-placeholder="创建起始时间"
        end-placeholder="创建结束时间"
        value-format="yyyy/MM/dd"
        style="width:250px"
        @change="daterangeChanged"
      />
      <el-button
        type="primary"
        size="small"
        icon="el-icon-search"
        @click="handleFilter"
      >
        搜索
      </el-button>
      <el-button
        type="info"
        size="small"
        icon="el-icon-refresh-right"
        @click="resetFilter"
      >
        重置
      </el-button>
    </div>
    <div class="cs-filter-result">
      <el-table
        v-loading="listLoading"
        :data="list"
        :height="'calc(100vh - 230px)'"
        border
        fit
        size="small"
        highlight-current-row
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
      >
        <el-table-column align="center" label="家族ID" prop="familyId"> </el-table-column>
        <el-table-column align="center" label="族长ID" prop="applyUserId">
          <template slot-scope="{ row }">
            <TooptipsCom :user-id="row.applyUserId" />
          </template>
        </el-table-column>
        <el-table-column align="center" label="修改项" prop="checkType">
          <template slot-scope="{ row }">
            <span>{{ checkTypeItem[row.checkType] }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="修改前内容" prop="oldValue">
          <template slot-scope="{ row }">
            <image-tooltip v-if="row.checkType === 3" :image-id="row.oldValue">
              <img
                slot="img"
                :src="row.oldValue + '?x-oss-process=image/resize,w_175'"
                style="cursor: pointer; width: 100px"
                title="点击放大"
                @click="zoomImage(row.oldValue)"
              />
            </image-tooltip>
            <span v-if="row.checkType !== 3">{{ row.oldValue }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="修改后内容" prop="newValue">
          <template slot-scope="{ row }">
            <image-tooltip v-if="row.checkType === 3" :image-id="row.newValue">
              <img
                slot="img"
                :src="row.newValue + '?x-oss-process=image/resize,w_175'"
                style="cursor: pointer; width: 100px"
                title="点击放大"
                @click="zoomImage(row.newValue)"
              />
            </image-tooltip>
            <span v-if="row.checkType !== 3">{{ row.newValue }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="修改时间" prop="updateAt">
          <template slot-scope="scope">
            <span>{{ scope.row.updateAt | parseTime }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作">
          <template slot-scope="{ row }">
            <el-button v-if="!row.checkStatus" type="primary" size="mini" @click="checkFamily(row, 1)">
              通过
            </el-button>
            <el-button v-if="!row.checkStatus" type="danger" size="mini" @click="refuseStatus(row)">
              不通过
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <TablePagination
        :current-page="listQuery.pageNum"
        :limit="listQuery.pageSize"
        :total="total"
        :loading="listLoading"
        @handleSizeChange="handleSizeChange2"
        @handleCurrentChange="handleCurrentChange2"
      />
    </div>
    <ImageViewer :visible.sync="showImage" :url="imageUrl" />
    <el-dialog title="拒绝申请" :visible.sync="dialogFormVisible1">
      <el-form :model="groundsRefusalItem">
        <el-form-item label="原因：" prop="reason">
          <el-autocomplete v-model="groundsRefusalItem.value" :fetch-suggestions="querySearch" size="large" placeholder="请输入拒绝原因" style="width: 80%;" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible1 = false">取 消</el-button>
        <el-button type="primary" @click="checkFamily(groundsRefusalItem.row, 2)">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import TablePagination from '@/components/TablePagination'
import { xhrQueryCheckApply, xhrAnchorCheckFamily } from '@/api/account'
export default {
name: 'ChangeAudit',
  components: { TablePagination },
  data() {
    return {
      total: 0,
      list: null,
      listLoading: false,
      dialogVisible: false,
      daterangeValue: '',
      showImage: false,
      imageUrl: null,
      dialogFormVisible1: false,
      groundsRefusalItem: {
        row: null, value: ''
      },
      checkTypeItem: {
        0: '家族ID', 1: '家族名称', 2: '家族简介', 3: '家族封面'
      },
      listQuery: {
        familyId: null,
        checkType: null,
        type: 0,
        pageNum: 1,
        pageSize: 100,
        startTime: null,
        endTime: null
      }
    }
  },
  created() {
    this.doSearch()
  },
  methods: {
    doSearch() {
      xhrQueryCheckApply(this.listQuery)
        .then(resp => {
          this.list = resp.data.list
          this.total = resp.data.count
          this.listLoading = false
        })
        .catch(err => {
          this.$message.error(err)
          this.listLoading = false
        })
    },
    checkFamily(row, status) {
      console.log(row)
      row['checkStatus'] = status
      if (status === 2) {
        row['rejectReason'] = this.groundsRefusalItem.value
      }
      xhrAnchorCheckFamily(row)
        .then(resp => {
          this.dialogFormVisible1 = false
          this.$message.success('操作成功')
          this.doSearch()
        })
        .catch(err => {
          this.$message.error(err)
          this.listLoading = false
        })
    },
    querySearch(queryString, cb) {
      const results = [
        { 'value': '家族图标审核未通过' },
        { 'value': '家族名称审核未通过' },
        { 'value': '家族简介审核未通过' }
      ];
      cb(results);
    },
    refuseStatus(row) {
      this.groundsRefusalItem.row = row
      this.dialogFormVisible1 = true
    },
    zoomImage(url) {
      this.showImage = true
      this.imageUrl = url
    }
  }
}
</script>

<style scoped>

</style>
